<template>
	<view class="scrool-page">
		<view class="list-cont">
			<scroll-view  class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<view v-if="showFlag">
					<view style="height:60px;font-size: 18px;background-color: gainsboro;padding-left: 40rpx;padding-top: 16px;">现存量数据</view>
					<view style="margin-top: 10px;margin-bottom: 10px;">
						<uni-row class="demo-uni-row" style="font-size: 16px;">
							<uni-col :span="12">
								<view class="demo-uni-col dark" style="padding-left: 40rpx;">商品编码</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" style="padding-right: 20rpx;">{{queryData.itemCode}}</view>
							</uni-col>
						</uni-row>						
						<uni-row class="demo-uni-row" style="margin-top: 10px;font-size: 16px;">
							<uni-col :span="12">
								<view class="demo-uni-col dark" style="padding-left: 40rpx;">商品名称</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" style="padding-right: 20rpx;">{{queryData.itemName}}</view>
							</uni-col>
						</uni-row>						
						<uni-row class="demo-uni-row" style="margin-top: 10px;font-size: 16px;">
							<uni-col :span="12">
								<view class="demo-uni-col dark" style="padding-left: 40rpx;">单位</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" style="padding-right: 20rpx;">{{queryData.unitOfMeasure}}</view>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row" style="margin-top: 10px;font-size: 16px;">
							<uni-col :span="12">
								<view class="demo-uni-col dark" style="padding-left: 40rpx;">规格型号</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" style="padding-right: 20rpx;">{{queryData.specification}}</view>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row" style="margin-top: 10px;font-size: 16px;">
							<uni-col :span="12">
								<view class="demo-uni-col dark" style="padding-left: 40rpx;">总箱数</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" style="padding-right: 20rpx;">{{queryData.boxSum}}</view>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row" style="margin-top: 10px;font-size: 16px;">
							<uni-col :span="12">
								<view class="demo-uni-col dark" style="padding-left: 40rpx;">现存量</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col light" style="padding-right: 20rpx;">{{queryData.qtySum}}</view>
							</uni-col>
						</uni-row>
					</view>
					<view style="height:60px;font-size: 18px;background-color: gainsboro;padding-left: 40rpx;padding-top: 16px;">库位明细</view>
					<view>
						<uni-row class="demo-uni-row">
							<uni-col :span="8">
								<view class="demo-uni-col dark" style="font-size: 18px;font-weight:bold;text-align: center;">商品库位</view>
							</uni-col>
							<uni-col :span="8">
								<view class="demo-uni-col light" style="font-size: 18px;font-weight:bold;text-align: center;">商品箱数</view>
							</uni-col>
							<uni-col :span="8">
								<view class="demo-uni-col light" style="font-size: 18px;font-weight:bold;text-align: center;">商品数量</view>
							</uni-col>
						</uni-row>	
						<view v-for="(item,index) in areaList" style="padding-top: 10px;">
							<uni-row class="demo-uni-row">
								<uni-col :span="8">
									<view class="demo-uni-col dark" style="font-size: 16px;text-align: center;">{{item.storageArea}}</view>
								</uni-col>
								<uni-col :span="8">
									<view class="demo-uni-col light" style="font-size: 16px;text-align: center;">{{item.boxSum}}</view>
								</uni-col>
								<uni-col :span="8">
									<view class="demo-uni-col light" style="font-size: 16px;text-align: center;">{{item.qtySum}}</view>
								</uni-col>
							</uni-row>	
						</view>
					</view>
				</view>
				
				<view v-else>
					<view v-for="(item,index) in areaList">
						<view style="height:60px;font-size: 18px;background-color: gainsboro;padding-left: 40rpx;padding-top: 16px;">{{index+1}}/{{listLength}}</view>
						<view style="padding-top: 10px;font-size: 16px;">
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="padding-left: 40rpx;">商品编码</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="padding-right: 20rpx;">{{item.item_code}}</view>
								</uni-col>
							</uni-row>	
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="padding-left: 40rpx;">商品名称</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="padding-right: 20rpx;">{{item.item_name}}</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="padding-left: 40rpx;">规格型号</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="padding-right: 20rpx;">{{item.specification}}</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="padding-left: 40rpx;">箱数</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="padding-right: 20rpx;">{{item.boxSum}}</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="padding-left: 40rpx;">现存量</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="padding-right: 20rpx;">{{item.qtySum}}</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="padding-left: 40rpx;">单位</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="padding-right: 20rpx;">{{item.unit_of_measure}}</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import Vue from 'vue';
	import { getToken } from '@/utils/auth';
	import common from '../../pages/common/common.js'
	var main, receiver, filter;
	var ScanDeviceClass = plus.android.importClass("android.device.ScanDevice");
	var scanDevice;
	export default {
		data() {
			return {
				showFlag:true, //区分物料还是库位，物料为true，库位为false
				resInfo: '', //搜索框内容
				isFocus: true,
				focus: true,
				queryData:{
					itemName:'',
					unitOfMeasure:'',
					itemCode:'',	
					specification:'',
					qtySum:'',
					boxSum:''
				},
				areaList:[],
				listLength:0,
				baseUrl:getApp().globalData.config.baseUrl,
				userName:this.$store.state.user.name,
				orgId:getApp().globalData.config.orgId,
			}
		},
		
		onShow() {
			this.orgId = uni.getStorageSync('orgId');
			scanDevice = new ScanDeviceClass();
			scanDevice.openScan(); // 打开扫描
			scanDevice.setOutScanMode(0); // 扫描模式				
			this.initScan();
			this.registerScan();
		},
		
		onHide: function() {
			this.unregisterScan();
		},
		
		destroyed: function() {
			this.unregisterScan();
		},
		
		onBackPress(options) {
			var that = this;
			if (options.from === 'navigateBack') {
			     return false;
			}
			//that.unregisterScan();
			uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
			    delta: 1
			});
			return true;
		},
		
		methods: {			
			initScan(popFlag) {
				let _this = this;
				main = plus.android.runtimeMainActivity(); //获取activity  
				var IntentFilter = plus.android.importClass('android.content.IntentFilter');
				filter = new IntentFilter();
				filter.addAction("scan.rcv.message"); // 换你的广播动作  
				receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
					onReceive: function(context, intent) {
						plus.android.importClass(intent);
						let code = intent.getByteArrayExtra('barocode');
					    let codeStr = common.utf8ByteToUnicodeStr(code);
						scanDevice.stopScan(); // 停止扫描	
						if(codeStr == null || codeStr == ''){
							uni.showToast({
								title: '请扫描数据',
								icon: 'error',
								duration: 2000
							});
							return;
						}
						var result = common.scanCode(codeStr);
						if(result[0] == "P"){
							_this.showFlag = true;
							uni.setNavigationBarTitle({
								title:result[1]
							});
							_this.queryDataByItemCode(result[1]);
						}else if(result[0] == "K"){
							_this.showFlag = false;
							uni.setNavigationBarTitle({
								title:result[1]
							});
							_this.queryDataByArearCode(result[1]);
						}else if(result[0] == "C"){
							_this.showFlag = true;
							uni.setNavigationBarTitle({
								title:result[1]
							});
							_this.queryDataByBoxCode(result[1]);
						}else{
							uni.showToast({
								title: '请扫描正确的数据',
								icon: 'error',
								duration: 2000
							});
							return;
						}											
					}
				});				
			},
			
			registerScan() {
				main.registerReceiver(receiver, filter);
			},
			
			unregisterScan() {
				main.unregisterReceiver(receiver);
			},
			
			//根据库位查询数据
			queryDataByArearCode(codeStr){
				uni.showLoading({
					title: "加载中",
					mask:true
				});
				var that = this;
				uni.request({
					url:that.baseUrl+'/system/barcode/select/areas',
					data:{
						storageArea : codeStr,
						orgId:that.orgId
					},
					method: 'POST',
					header:{
						'authorization': getToken()
					},
					dataType:'json',
					success: (res) =>{						
						if(res.data.code == '200'){
							that.areaList = res.data.data;
							that.listLength =  res.data.data.length;
							//隐藏加载框
							uni.hideLoading();
						}else{
							//隐藏加载框
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 5000
							});
							return;
						}
					}
				})
			},
	
			//根据箱号查询条码主档的信息
			queryDataByBoxCode(codeStr){
				uni.showLoading({
					title: "加载中",
					mask:true
				});
				var that = this;
				uni.request({
					url:that.baseUrl+'/system/barcode/box',
					data:{
						userName:that.userName,
						boxCode:codeStr	,
						orgId:that.orgId,
					},
					method: 'POST',
					header:{
						'authorization':  getToken()
					},
					dataType:'json',
					success: (res) =>{
						if(res.data.code == '200' || res.data.code == 200) {	
							var result = res.data.data;														
							that.queryDataByItemCode(result.itemCode);
							uni.hideLoading();
						}else{
							//隐藏加载框
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 5000
							});
							return;
						}
						
					},							
				})
			},
	
			//根据物料查询数据
			queryDataByItemCode(codeStr){
				uni.showLoading({
					title: "加载中",
					mask:true
				});
				var that = this;
				uni.request({
					url:that.baseUrl+'/system/barcode/select/itemsCodes',
					data:{
						itemCode : codeStr,
						orgId:that.orgId
					},
					method: 'POST',
					header:{
						'authorization': getToken()
					},
					dataType:'json',
					success: (res) =>{						
						if(res.data.code == '200'){
							that.queryData = res.data.data;
							that.areaList = res.data.data.areaList;
							//隐藏加载框
							uni.hideLoading();
						}else{
							//隐藏加载框
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 3000
							});
							return;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #fff;
		height: 300upx;
		align-items: center;
		margin-top: 10upx;
	}
	.text-content {
		font-size: 48rpx;
		text-align: center;
	}
	
	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
		font-size: 26rpx;
	}
	
	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		//background-color: #f8f8f8;
		height: 30px;
		padding: 0 80px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height:30px;
		font-size: 26rpx;
	}
	
	page {
		width: 100%;
		height: 100%;
	}
	
	
	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	
	.header-cont {
		width: 100%;
		height: 110rpx;
		line-height: 100rpx;
		text-align: center;
		// background: red;
	}
	
	.list-cont {
		flex: 1;
		position: relative;
		background-color: #fff;
		.scrool-more {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	
		.list {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #e0e0e0;
	
		}
	}
	
	
	.footer {
		color: #fff;
		line-height: 100rpx;
		flex: 0 0 100rpx;
		/* 不放大不缩小固定100rpx */
	}
</style>
